<template>
  <div class="wrapper">
    <h3>low-code</h3>
    <demo></demo>
    <div class="btn-box">
      <div class="btn active">预览</div>
      <div class="btn">保存</div>
      <div class="btn">发布</div>
    </div>
  </div>
</template>

<script>
import demo from "./demo.vue";
export default {
    name: "headView",
    components: {
        demo,
    },
};
</script>

<style scoped lang="less">
.wrapper {
    background-color: rgb(160, 94, 94);
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 0 15px;
    .btn-box {
        display: flex;
        justify-content: space-between;
    }
    .btn {
        background-color: #333;
        font-size: 13px;
        margin: 0 10px;
        padding: 2px 10px;
        border-radius: 4px;
        cursor: pointer;
        &.active {
            color: white;
            background-color: #5794f5;
        }
    }
}
</style>